

import './my-collection.less';

import moreWhite from '@/assets/images/more_white.png';
import collectionIcon from '@/assets/images/collection_icon.png';
import collectionMenu from '@/assets/images/collection_menu.png';
import { Carousel } from 'antd';

const MyCollection:React.FC<React.HTMLProps<Element>> = (props) => {
    console.log(props)
    // props.type init 为图标 list为列表
    return (
        <div>
            {
               props.type === 'init' && 
               <div className="my_collection_init">
                    <img src={collectionMenu} alt="" />
                </div>
            }
            {
               props.type === 'list' && 
               <div className="my_collection_list">
                    <div className="my_collection_list_tit">
                        <div className='my_collection_list_tit_icon'>
                            <div></div>
                            <div></div>
                            <img src={collectionIcon} alt="" />
                        </div>
                        <h4>我的收藏</h4>
                        <span>更多
                            <img src={moreWhite} alt="" />
                        </span>
                    </div>
                    <div className='my_collection_list_swiper'>
                        {/* 需要自动滚动添加 autoplay 即可 */}
                    <Carousel >
                        <div className="my_collection_list_con">
                            <div>
                                <span className='my_collection_list_con_1'>预</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_2'>信</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_3'>税</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_4'>数</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                        
                        </div>
                        <div className="my_collection_list_con">
                            <div>
                                <span className='my_collection_list_con_1'>预</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_2'>信</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_3'>税</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                            <div>
                                <span className='my_collection_list_con_4'>数</span>
                                <p>dawdawdawwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
                            </div>
                        
                        </div>
                    </Carousel>
                    </div>
                    
                </div>
            }
        </div>
    )
}
export default MyCollection